<template>
	<view style="height: 100vh;position: relative; background-color: #1f2025;" class="content">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top">
				<cu-custom :isBack="true" :bgColor="'bg-080808'" :backColor="'text-white'">
					<block slot="backText"><view class="text-white ">{{type=='addHostPlay'?'添加':'选择'}}剧本</view></block>
				</cu-custom>
				<view id="head" class="" style="background-color: #080808;color: #fff;font-size: 26rpx;">
					<van-search @search="search" @change="searchChange" shape="round" background="#080808" placeholder="输入剧本名,快速找到哈" />
					<view class="flex justify-between" style="background-color: #080808;color: #b8b8b8;font-size: 26rpx;position: relative;">
						<scroll-view scroll-x class="nav">
							<view
								class="cu-item"
								:class="index == TabCur ? 'text-white cur' : ''"
								v-for="(item, index) in ['门店剧本']"
								:key="index"
								@click="tabSelect"
								:data-id="index"
							>
								{{ item }}
							</view>
						</scroll-view>
						<view class="text-center" style="width: 140rpx;line-height: 90rpx;" @click="show = !show">
							<text class="cuIcon-flashlightopen"></text>
							筛选
						</view>
						<view
							v-show="show"
							@click="show = false"
							style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.4);position: fixed;top: 0;left: 0;z-index: 999;"
						></view>
						<uni-transition
							mode-class="slide-right"
							:styles="{
								width: '100%',
								height: '700rpx',
								'background-color': '#fff',
								position: 'absolute',
								top: '90rpx',
								left: 0,
								'z-index': '1000',
								overflow: 'hidden'
							}"
							:show="show"
						>
							<scroll-view scroll-y="true" style="height: 620rpx;">
								<view>
									<view class="padding" v-for="(bigClass, index) in classList" :key="index">
										<view class="text-black">{{ bigClass.big_name }}</view>
										<view class="flex flex-wrap margin-top">
											<view
												class="item cu-tag radius margin-top-xs margin-left-xs text-black"
												:class="{
													'bg-yellow':
														array[0].SmallClassId == smallClass.id ||
														array[1].SmallClassId == smallClass.id ||
														array[2].SmallClassId == smallClass.id ||
														array[3].SmallClassId == smallClass.id ||
														array[4].SmallClassId == smallClass.id ||
														array[5].SmallClassId == smallClass.id ||
														array[6].SmallClassId == smallClass.id ||
														array[7].SmallClassId == smallClass.id ||
														array[8].SmallClassId == smallClass.id
												}"
												style="width: 150rpx;overflow: hidden;"
												v-for="(smallClass, index1) in bigClass.smallClasses"
												:key="index1"
												@click="selectTag(index, smallClass.id)"
											>
												{{ smallClass.small_name }}
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
							<view style="height: 80rpx;" class="">
								<button @click="removeArray" class="cu-btn  bg-gray lg" style="width: 50%;border-radius: 0;">重置</button>
								<button @click="submitSx" class="cu-btn  bg-yellow lg" style="width: 50%;border-radius: 0;">确定</button>
							</view>
						</uni-transition>
					</view>
				</view>
			</view>

			<view class="grarg" style="background-color: #1f2025;">
				<view class="cu-card">
					<view class="cu-item shadow padding-sm" style="background-color: #292929;position: relative;" v-for="(item, index) in dataList" :key="index">
						<image v-if="item.status == 1" src="../../static/icon/zd.png" class="zd" mode=""></image>
						<view class="flex justify-start">
							<image :src="$isHttp(item.picture)" style="width: 148rpx;height: 210rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class=" margin-left-sm" style="width: 520rpx;">
								<view class="flex justify-start margin-top-xs">
									<view class="text-bold text-white">{{ item.name }}</view>
									<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
								</view>
								<view class="margin-top-sm">
									<view
										v-for="(item1, index1) in item.smallClasses"
										:key="index1"
										v-if="index1 < 6"
										class="cu-tag sm round"
										style="background-color: #3f3f3f;color: #b2b1b6;"
									>
										{{ item1.small_name }}
									</view>
								</view>
								<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
									<view class="flex justify-start align-center">
										<text class="cuIcon-friendfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.sex_type }}</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-timefill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.hour }}小时</view>
									</view>
									<view class="flex justify-start align-center margin-left-sm">
										<text class="cuIcon-selectionfill text-yellow"></text>
										<view class="text-sm margin-left-xs">{{ item.difficulty }}</view>
									</view>
								</view>
								<view class="flex justify-between  margin-top-xs">
									<view class="flex align-end text-yellow">
										<view class="text-sm ">推荐价¥</view>
										<view class="text-lg text-bold">{{ item.price }}</view>
										<view class="text-sm ">/位</view>
									</view>
									<view @click.stop="selectPlay(item,index)" class="cu-btn sm round bg-yellow" :class="{'bg-grey':item.presentAddStatus===1?true:false}">{{type=='addHostPlay'?(item.presentAddStatus===1?'已添加':'添加'):'选择'}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			type:'',
			id:'',
			show: false, //筛选弹框控制
			classList: [], //分类列表
			dataList: [], //剧本列表
			searchvalue: '', //搜索关键词
			TabCur: 0, //tab切换
			scrollLeft: 0,

			array: [], //筛选条件对象
			arrayVal: [], //筛选条件id

			index: ''
		};
	},
	onLoad(option) {
		this.id=option.id
		this.type=option.type
		this.getPlayClass();
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			this.$u.adminApi
				.getStoreList({
					page: pageNo,
					number: pageSize,
					name: this.searchvalue,
					array: this.arrayVal,
					storeId: this.vuex_bussinessId,
					presentId:this.id?this.id:'',
					select: 1
				})
				.then(res => {
					this.$refs.paging.complete(res.data);
				});
		},

		selectPlay(item,index) {
			if(this.type=='addHostPlay'){
				this.$u.adminApi.addPresentPlay({
					presentId:this.id,
					playId:item.id
				}).then(res=>{
					if(res.code===200){
						this.$successToast(res.message)
						this.dataList[index].presentAddStatus=1
					}
				})
			}else{
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一个页面 
				//接调用上一个页面的setData()方法，把数据存到上一个页面中
				prevPage.$vm.item=item
				uni.navigateBack();
			}
		},

		getPlayClass() {
			this.$u.api.getPlayClass().then(res => {
				this.classList = res.data;
			});
		},
		search(e) {
			this.$refs.paging.reload();
		},
		searchChange(e) {
			this.searchvalue = e.detail;
		},
		selectTag(index, SmallClassId) {
			//1. 首先我们要得到这个对象
			var tina = this.array.filter(s => {
				return s.index == index;
			});
			var tina1 = this.array.filter(s => {
				return s.SmallClassId == SmallClassId;
			});
			//2. 其次得到这个对象在数组中对应的索引
			var key = this.array.indexOf(tina[0]);
			//3. 如果存在则将其删除，key > -1 代表存在
			key > -1 && this.array.splice(key, 1);
			if (tina1[0] == undefined) {
				this.array.push({
					index,
					SmallClassId
				});
			} else {
				//2. 其次得到这个对象在数组中对应的索引
				var key1 = this.array.indexOf(tina1[0]);

				//3. 如果存在则将其删除，key > -1 代表存在
				key1 > -1 && this.array.splice(key1, 1);
			}

			// 冒泡排序（从后向前）
			function sort(arr) {
				for (var j = 0; j < arr.length - 1; j++) {
					//两两比较，如果前一个比后一个大，则交换位置。
					for (var i = 0; i < arr.length - 1 - j; i++) {
						if (arr[i].index > arr[i + 1].index) {
							var temp = arr[i];
							arr[i] = arr[i + 1];
							arr[i + 1] = temp;
						}
					}
				}
			}
			sort(this.array);
			this.arrayVal = [];
			for (var i = 0; i < this.array.length; i++) {
				this.arrayVal.push(this.array[i].SmallClassId);
			}

			console.info('1', this.array);
			console.info('2', this.arrayVal);
		},
		submitSx() {
			this.show = false
			this.$refs.paging.reload()
		},
		removeArray() {
			this.array = [];
			this.arrayVal = [];
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			this.$refs.paging.reload();
		}
	}
};
</script>

<style lang="scss" scoped>
.zd {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 55rpx;
	z-index: 1;
}

// .grarg {
// 	position: absolute;
// 	top: 225rpx;
// 	bottom: 100rpx;
// }

.box_whbrc {
	width: 90rpx;
	height: 60rpx;
	border-radius: 30rpx;
	// background-color: #cfa526;
	margin-right: 20rpx;
	text-align: center;
	line-height: 60rpx;
}

.bgc_cfa526 {
	background-color: #cfa526;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}
</style>
